<template>
	<view class="costom-select">
		<view class="select-tabs">
			<view class="select-tab" :class="{active: currIdx == index}" v-for="(item, index) in tabsData"
				:key="item.filed">
				<text @click="handleSelectTap(index, item.filed, item.type)">{{item.name}}</text>
				<template v-if="item.type === 'tags' || item.type === 'popup'">
					<image @click.capture="handleIconClick(item.filed, item.type)"
						:src="(currFiled == item.filed && selectTypeObj[item.filed] == 1) ? '/static/images/button-select-icon.png' : '/static/images/buttom-icon.png'"
						class="tap-icon" mode=""></image>
				</template>
				<template v-if="item.type == 'select'">
					<image @click.capture="handleIconClick(item.filed, item.type)"
						:src="(currFiled == item.filed && selectTypeObj[item.filed] == 1) ? '/static/images/t-select-icon.png' : (currFiled === item.filed &&  selectTypeObj[item.filed] > 1) ? '/static/images/b-select-icon.png' : '/static/images/tb-icon.png'"
						class="icon" mode=""></image>
				</template>
			</view>
		</view>

		<!--两种 popup一种是 popup类型 -->
		<view class="popups" v-if="currPopType == 'popup'">
			<view class="popup-item" v-for="item in popupData" :key="item">{{item}}</view>
		</view>
		<!-- 一种是 tags -->
		<view class="tags" v-else-if="currPopType == 'tags'">
			<view class="tag-item" :class="{activeTag: currPopIdx === index}" v-for="(item, index) in popupData"
				@click="handlePopup(index)" :key="item">{{item}}</view>
		</view>
		<!-- 一种是costom 自定义的 -->
		<view class="costoms" v-else-if="currPopType == 'costom'">
			<slot name="popup"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsData: [],
				popupData: [],
				selectTypeObj: {},
				currIdx: 0,
				currFiled: null,
				currPopType: null,
				currPopIdx: 0
			}
		},
		props: {
			Stabs: {
				type: Array,
				default: []
			},
			Spopus: {
				type: Array,
				default: []
			}
		},
		created() {
			const {
				Stabs,
				Spopus
			} = this.$props
			if (Stabs.length) {
				this.tabsData = Stabs
			}
			if (Spopus.length) {
				this.popupData = Spopus
			}
			this.handleAnalysis(Stabs)
		},
		mounted() {

		},
		methods: {
			handleAnalysis(data) { // 首次进入的时候就执行方法
				data.forEach(item => {
					if (item.type !== 'value') {
						this.$set(this.selectTypeObj, item.filed, 0)
					}
				})
				const filed = data[this.currIdx].filed
				const type = data[this.currIdx].type
				this.currFiled = filed
				this.currPopType = type
				this.handleIconClick(filed, type)
			},
			handleSelectTap(idx, filed, type) { // 选择的tap栏的点击
				// 先清空 
				this.handleClearIcon()
				this.currIdx = idx
				this.currFiled = filed
				this.currPopType = type
				this.handleIconClick(filed, type, false)

				// 自定义事件
				this.$emit('onSelectTap', {
					idx,
					filed,
					type,
					selectTypeObj: this.selectTypeObj
				})
			},
			handleIconClick(filed, type, isEmit = true) { // 点击tab栏侧边的小图标
				if (type === 'tags' || type === 'popup') {
					// 使用￥set方法 实现更改对象数据 更新视图 否者视图不会更新
					if (this.selectTypeObj[filed] == 0) {
						this.$set(this.selectTypeObj, String(filed), 1)
					} else {
						this.$set(this.selectTypeObj, String(filed), 0)
					}
				} else if (type === 'select') {
					let newValue = (this.selectTypeObj[filed] < 2) ? this.selectTypeObj[filed] + 1 : 0;
					this.$set(this.selectTypeObj, String(filed), newValue);
				}
				if (isEmit) {
					this.$emit('onSelectTap', {
						filed,
						type,
						selectTypeObj: this.selectTypeObj
					})
				}
			},
			handlePopup(idx) { // 点击popup的点击
				this.currPopIdx = idx
				this.$emit('onPopupClick', idx)
			},
			handleClearIcon() { // 清空方法
				Object.keys(this.selectTypeObj).forEach(filed => {
					this.$set(this.selectTypeObj, String(filed), 0)
				})
				this.currPopIdx = 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	.costom-select {
		padding: 16rpx 25rpx;

		.select-tabs {
			display: flex;
			align-items: center;
			padding-bottom: 14rpx;
			border-bottom: 2rpx solid #E8E8E8;

			.icon,
			.tap-icon {
				width: 24rpx;
				height: 24rpx;
				margin-left: 6rpx;
			}

			.tap-icon {
				width: 22rpx;
				height: 14rpx;
			}

			.select-tab {
				display: flex;
				align-items: center;
				margin-right: 24rpx;
			}
		}

		.active {
			color: #D0241C;
		}

		.popups,
		.tags {
			display: flex;
			align-items: center;
		}

		.tags {
			padding: 14rpx 8rpx;
			overflow-x: scroll;

			.tag-item {
				flex-shrink: 0;
				background-color: #F3F3F3;
				padding: 14rpx 24rpx;
				border-radius: 28rpx;
				margin-right: 14rpx;
				font-size: 28rpx;
			}

			.activeTag {
				color: #D0241C;
				background-color: #FFEEEE;
			}
		}
	}
</style>